import React from "react";
import Button from 'react-bootstrap/Button';
import { redirect, useNavigate, useLoaderData } from "react-router-dom";
import styles from "./Category.module.css";
import { DataFunctionArgs } from "../../types/router.types";
import { getCategoryById } from "./categoriesAPI";
import { Category } from "../../types/category";

export const resolver = async ({ params }: DataFunctionArgs<null>) => {
    const { key } = params;

    if (!key) return redirect('/');
    
    const category: Category = await getCategoryById(key);

    if (!category) return redirect('/');

    return category;
}

const CategoryComponent = () => {
    const navigate = useNavigate();
    const data: Category = useLoaderData() as Category;

    const goBack = () => navigate('/');

    return (
        <div className={styles.category}>
            <div className={styles["category__player-wrapper"]}>
                <h1 className={styles["category__title"]}>{data.title}</h1>
                <video width="80%" controls>
                    <source src="https://media.geeksforgeeks.org/wp-content/uploads/20231020155223/Full-Stack-Development-_-LIVE-Classes-_-GeeksforGeeks.mp4"
                        type="video/mp4" />
                </video>
                <div className={styles["btn-wrapper"]}>
                    <Button onClick={goBack}>Go Back</Button>
                </div>
            </div>
        </div>
    )
};

export default CategoryComponent;
